<template>
	<view class="container">
		<view class="wx-auth-container">
			<div class="box">
				<view class="logo-info  ">
					<text class="title">欢迎进入{{ projectName }}</text>
				</view>
				
				<view class="small-tips">
					<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
					<view>您的公开信息（昵称、头像）</view>
				</view>
				<view class="btns"><!-- @getAuthorize="getPhoneNumber" -->
					<button open-type="getAuthorize"  scope='phoneNumber'
         @getAuthorize="getUserProfileNew"  class="btn-auth">业主认证</button>
       <!-- <button type="primary"  open-type="getAuthorize"  scope='phoneNumber' bindtap="getUserProfile" @getphonenumber="getUserProfileNew" class="btn-auth">使用微信授权</button> -->
					<div @click="backToHome" class="btn-callback">暂不登录</div>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		bindRoom
	} from "@/api/user.js";

	import storage from "@/utils/storage.js";
	
	import config from '@/config/config';
	export default {
		data() {
			return {
				background: {
					backgroundColor: "transparent"
				},
				// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
				phoneAuthPopup: false,
				show: false,
				// 授权信息展示，商城名称
				projectName: config.name,
				//微信返回信息，用于揭秘信息，获取sessionkey
				code: "",
				//微信昵称
				nickName: "",
        image:"",
				baseSite: {},
			};
		},

		//微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
		mounted(){
			let that = this;
			//获取code
			uni.login({
				success: (res) => {
					console.log("code", res.code);
					that.code = res.code;
				},
			});
		},
		methods: {
      getUserProfileNew(e) {
      	console.log(e);
      	let that = this;
      	// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      	uni.getUserProfile({
      		desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      		success: (res) => {
      			console.log("getUserProfile", res);
      			that.nickName = res.userInfo.nickName;
      			that.image = res.userInfo.avatarUrl;
      			//展示手机号获取授权
      			this.getPhoneNumber(e)
      		},
      		fail: (res) => {
      			that.nickName = "微信用户";
      			that.image =
      				"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132";
      			//展示手机号获取授权
      		},
      	});
      },
			
			phoneBindPopupClose(e) {
				if (e.show == false) {
					this.$refs.verification.hide();
					console.log("phoneBindPopupClose", e)
				}

			},
			
			
			
			//获取手机号授权
			async getPhoneNumber(e) {
				console.log('获取授权',e);
          let that=this;
          my.getPhoneNumber({
            success: (res) => {
              console.log("my.getphonenumber的res:", JSON.parse(res.response))
              bindRoom({
                str:JSON.parse(res.response).response,
                auth_code:that.code,
                nickName:that.nickName,
                image:that.image,
              }).then((res)=>{
                if(res.data.code==0){
                	
                	storage.setAccessToken(res.data.data.accessToken);
                  storage.setHasLogin(true);
                  storage.setHasBindRoom(res.data.data.bindRoomStatus);
									// if(res.data.data.alreadyBind==true){
										
									// }
									uni.showModal({
										title:"提示",
										content:res.data.data.tipsMsg,
										showCancel:false,
										success: function (res) {
											uni.navigateBack({
												delta: 1,
											});
										}
									})
                	
                }else{
                	uni.showToast({
                		title:res.data.msg,
                		duration:2000,
                		icon:"none"
                	})
                }
              })
            },
            fail: (err) => {
              console.log("err",err);
            },
          });

				

				// let code = this.code;
				// let image = this.image;
				// let nickName = this.nickName;
				// let res = await mpAutoLogin({
				// 	code,
				// 	image,
				// 	nickName
				// }, "alipay")
				// uni.hideLoading();
				// console.log("aliAutoLogin", res);
			},
			
			
			async scopeUserInfo(e) {
				console.log(e)
				my.getAuthCode({
					scopes: 'auth_base',
					success: (infoRes) => {
						this.auth_code = infoRes.authCode
						console.log('支付宝用户基础信息', infoRes);
						// this.sendUserInfo(infoRes.userInfo.avatarUrl,infoRes.userInfo.nickName);
						// this.phoneAuthPopup = true;
						this.login(infoRes.authCode);
						console.log("res",res);
					},
					fail: res => {
						my.alert({
							title: 'my.getAuthCode 调用失败',
							content: JSON.stringify(res),
						});
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	/*微信授权*/
	page {
		background-color: #ffffff;
		
	}
	.container {
		height: 100vh;
		background-image: linear-gradient(rgba(252, 110, 100, 1), rgba(255, 151, 65, 0.7), rgba(255, 151, 65, 0.3), rgba(249, 108, 101, 0));
		display: flex;
	}

	.wx-auth-container {
		width: 100%;
		margin-top: 10%;
	}

	.logo-info {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		flex-direction: row;
		align-items: flex-start;
		padding: 20rpx;

		font-weight: bold;
	}

	

	.logo-info-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: none;
	}

	text.title,
	text.shop {
		display: inline-block;
		font-size: 60rpx;
		color: #333;
	}

	text.shop {
		display: inline-block;
		font-size: 55rpx;
		color: #333;
	}

	.box {
		margin: 0 32rpx;
	}

	/* 文字提示*/
	.small-tips {
		width: 94%;
		padding: 20rpx;
		font-size: 24rpx;
		margin: 0 0 20rpx;
		// color: #999;
		color: rgb(226, 110, 95)
	}

	.auth-button {
		padding: 10px 20px;
		width: calc(100% - 20 * 4rpx);
	}

	.tips {
		width: 80%;
		text-align: left;
		margin: 6% 10%;
		margin-top: 48rpx;
		line-height: 1.75;
	}

	.register {
		
		border: none !important;
		background: #fff !important;
	}

	.btn-auth {
		color: white;
		background-image: linear-gradient(45deg, rgb(251, 108, 100), rgb(246, 149, 98));
		width: 92%;
		margin: 0 auto 40rpx;
		border-radius: 100px;
		animation: mymove 5s infinite;
		-webkit-animation: mymove 5s infinite;
		/*Safari and Chrome*/
		animation-direction: alternate;
		/*轮流反向播放动画。*/
		animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		/* Safari 和 Chrome */
		-webkit-animation: mymove 5s infinite;
		-webkit-animation-direction: alternate;
		/*轮流反向播放动画。*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
	}

	.btn-callback {
		text-align: center;
		font-size: 30rpx;
		background: transparent;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 100px;
		width: 92%;
		margin: 0 auto;
		color: rgb(223, 118, 112);
		border: 1px solid rgb(223, 118, 112);
	}

	.btns {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
	}

	@keyframes mymove {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}
	}
</style>